<template>
  <PageLayout>
    <template #header>
      <BasicForm
        :options="queryOptions"
        @ok="onQueryDataByParams"
        :labelWidth="100"
      ></BasicForm>
    </template>
    <div class="table-box">
      <div class="head-box">
        <div class="title">订单列表</div>
        <!-- <a-space :size="16">
          <a-button type="primary" @click="edit()">新建</a-button>
          <a-button>导入</a-button>
        </a-space> -->
      </div>
      <div class="bg-fff">
        <!-- :apiFetch="apiFetch"  -->
        <BasicTable
          ref="tableRef"
          :columns="columns"
          :query-params="queryData"
          :apiFetch="postSysOrderPage"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'action'">
              <a-space class="space-btn--box" :size="10">
                <a class="btn" @click="edit(record)">修改</a>
                <a class="btn" @click="changeStatus(record)">{{
                  record.status == 0 ? "禁用" : "启用"
                }}</a>
                <a class="btn" @click="remove(record.id)">删除</a>
                <a class="btn" @click="resetPwd(record.id)">重置密码</a>
              </a-space>
            </template>
          </template>
        </BasicTable>
      </div>
    </div>
  </PageLayout>
</template>

<script name="order-list" setup>
import {
  postSysOrderPage,
  // postUserPwdReset,
  // postUserDelete,
  // postUserUpdateStatus,
} from "@/api/common";
import { useStoreCommonEnum } from "@/store";
import { comfirmModal } from "@/hooks/useModal";
import { message } from "ant-design-vue";
const storeCommonEnum = useStoreCommonEnum();
const router = useRouter();
const queryOptions = ref([
  {
    name: "User ID",
    type: "input",
    value: "",
    placeholder: "请输入",
    filed: "clientUserId",
  },
  {
    name: "支付订单编号",
    type: "input",
    value: "",
    placeholder: "请输入",
    filed: "orderNo",
  },
  {
    name: "消费时间",
    type: "range-picker",
    value: [],
    placeholder: "请选择",
    filed: "rangeDate",
    dateFields: ["startCreateTime", "endCreateTime"],
  },
  {
    name: "套餐类型",
    type: "select",
    value: undefined,
    placeholder: "请选择",
    filed: "type",
    list: [
      {
        label: "单次卡",
        value: "0",
      },
      {
        label: "多次卡",
        value: "1",
      },
    ],
  },
  {
    name: "套餐名称",
    type: "input",
    value: "",
    placeholder: "请输入",
    filed: "packageName",
  },
]);
const columns = [
  {
    title: "序号",
    dataIndex: "index",
    width: "80px",
    customRender: (record) => `${record.index + 1}`,
  },
  {
    title: "User ID",
    dataIndex: "clientUserId",
    key: "clientUserId",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "微信名",
    dataIndex: "nickname",
    key: "nickname",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "订单编号",
    dataIndex: "orderNo",
    key: "orderNo",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "订单状态",
    dataIndex: "status",
    key: "status",
    width: "150px",
    ellipsis: true,
    customRender: ({ record }) =>
      record.status == 0
        ? "使用中"
        : record.status == 1
        ? "异常结束"
        : "已完成",
  },
  {
    title: "套餐类型",
    dataIndex: "type",
    key: "type",
    width: "150px",
    ellipsis: true,
    customRender: ({ record }) => (record.type == 0 ? "单次卡" : "多次卡"),
  },
  {
    title: "套餐名称",
    dataIndex: "packageName",
    key: "packageName",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "消费金额",
    dataIndex: "amount",
    key: "amount",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "消费时间",
    dataIndex: "createTime",
    key: "createTime",
    width: "150px",
    ellipsis: true,
  },

  // {
  //   title: "操作",
  //   fixed: "right",
  //   dataIndex: "action",
  //   key: "action",
  //   width: 240,
  // },
];

const queryData = reactive({});
const tableRef = ref(null);
const onQueryDataByParams = (params) => {
  for (let key in params) {
    queryData[key] = params[key];
  }
  tableRef.value.refreshTableData();
};

const edit = (record) => {
  router.push({
    path: "/sys/account/edit",
    query: {
      id: record?.id,
    },
  });
};

// const changeStatus = (record) => {
//   const title = record.status == 0 ? "禁用" : "启用";
//   comfirmModal({
//     content: `确认${title}该账号`,
//     onOk() {
//       postUserUpdateStatus({
//         id: record.id,
//         status: record.status == 0 ? 1 : 0,
//       }).then(() => {
//         message.success(`${title}成功`);
//         tableRef.value.fetch();
//       });
//     },
//   });
// };
// const remove = (id) => {
//   comfirmModal({
//     content: "确认删除该账号",
//     onOk() {
//       postUserDelete({ id }).then(() => {
//         message.success("删除成功");
//         tableRef.value.fetch();
//       });
//     },
//   });
// };
// const resetPwd = (id) => {
//   comfirmModal({
//     content: "确定重置密码为anke123456吗？",
//     onOk() {
//       postUserPwdReset({ id }).then(() => {
//         message.success("重置成功");
//         tableRef.value.fetch();
//       });
//     },
//   });
// };

const dataSource = ref(
  Array.from({ length: 11 }, () => ({
    spaceName: "2121",
  }))
);
</script>

<style lang="less" scoped></style>
